<template>
  <div class="slider">
    <swiper class="container" :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide>
        <img v-lazy="'/imgs/slider/slide-1.jpg'" alt="">
      </swiper-slide>
      <swiper-slide>
        <img v-lazy="'/imgs/slider/slide-2.jpg'" alt="">
      </swiper-slide>
      <swiper-slide>
        <img v-lazy="'/imgs/slider/slide-3.jpg'" alt="">
      </swiper-slide>
      <swiper-slide>
        <img v-lazy="'/imgs/slider/slide-4.jpg'" alt="">
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'slider-swiper',
  data () {
    return {
      swiperOption: {
        autoplay: true,
        loop: true,
        effect: 'cube',
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.slider {
  width: 1226px;
  height: 451px;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;

  .container {
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
    }

    .swiper-button-prev {
      margin-left: 264px;
    }
  }
}
</style>
